In learning the IntersectionObserver api I'm encountering a (seemlingly very basic) scenario that I can't figure out how to handle, and nothing I've read so far has addressed it.

I don't think the specifics matter here -- I think it's a conceptual thing I'm not getting -- so I'm going to put this in generic terms.

The Problem: When I first load my infinitely scrolling screen an initial x number of entries are fetched and rendered on screen. All good. If my bottom sentinel is still intersecting the viewport after this, a second fetch is made and the new entries are added. Still good. However, at this point if my sentinel is still intersecting the viewport (i.e. not enought entries have been added to shove it offscreen) I'm stuck. There are no scroll bars so I can't scroll down and nothing further is fetched. If I resize the window such that the sentinel disappears offscreen and then scroll down, more is fetched.

My Question: So how do I ensure that on an initial load my infinitely scrolling screen gets "filled up" with entries and the sentinel is shoved off screen? Is there a way I can implement some kind of "while entry.IsIntersecting" logic?

Here's how I'm initializing the observer (this is in an Angular component's ngOnInit() but I don't think that's relevant)...

    const options = {
        rootMargin: '0px 0px 0px 0px' 
    };

    this.observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                this.loadMore.emit(entry);
            }
        });
    }, options);
    this.observer.observe(this.infiniteScrollSentinal.nativeElement);
    

Thank you